<template>
  <div class="goods">
      <van-row :align="'center'">
          <van-col span="8">
            <van-image
             width="100"
             height="100"
             :src="props.SettlementData?.goods_thumb"
             radius="5px"
            />
          </van-col>
          <van-col span="14">
            <div class="goods-name">{{ props.SettlementData?.goods_name }}</div>
            <div class="goods-desc">{{ props.SettlementData?.goods_desc }}</div>
            <div class="goods-price">￥{{ props.SettlementData?.price }}</div>
          </van-col>
          <van-col span="2">
            ×1
          </van-col>
      </van-row>
      <van-divider />
    </div>
</template>

<script setup lang="ts">

  const props = defineProps({
    SettlementData: Object
  });

</script>

<style scoped lang="less">

  .goods{
    margin-top: 10px;
    .goods-name{
      font-weight: bold;
      color: #000;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .goods-desc{
      color: #333;
      margin-top: 7px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .goods-price{
      font-size: 25px;
      margin-top: 10px;
      color: #5881cf;
    }
  }

</style>
